<template>
  <div class="app-container">
    <!--    顶部搜索栏-->
    <el-form
      :inline="true"
      :model="listParams"
      class="demo-form-inline"
      style="margin-left: 30px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题">
            <el-input
              v-model="listParams.title"
              placeholder="标题"
              clearable
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="联系人姓名">
            <el-input
              v-model="listParams.name"
              placeholder="联系人姓名"
              clearable
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="联系人公司">
            <el-input
              v-model="listParams.company"
              placeholder="联系人公司"
              clearable
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="类型">
            <el-select
              v-model="listParams.type"
              clearable
              placeholder="类型"
              style="width: 130px"
            >
              <el-option
                label="户外"
                value="1"
              />
              <el-option
                label="户内"
                value="0"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="fetchData(listParams)"
            >
              <i class="el-icon-zoom-in" />
              <span>查询</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button
      type="success"
      style="margin-bottom: 10px"
      round
      @click="dialogAddFormVisible = true"
    >
      <i class="el-icon-circle-plus-outline" />
      <span>新建活动</span>
    </el-button>
    <el-button
      type="primary"
      style="margin-bottom: 10px"
      round
      @click="exportActivity"
    >
      <i class="el-icon-circle-plus-outline" />
      <span>导出活动</span>
    </el-button>
    <!--    列表-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        align="center"
        label="活动编号"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.activityId }}
        </template>
      </el-table-column>
      <el-table-column label="标题">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="开始时间"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.beginTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="结束时间"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动人数"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.headcount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="类型"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.type == 0 ? "户内" : "户外" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="当前状态"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          {{ getStatus(scope.row.status, scope.row.beginTime) }}
        </template>
      </el-table-column>
      <el-table-column
        label="联系人"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="联系人公司"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.company }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="300"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status == '0'"
            type="warning"
            @click="update(scope.$index)"
          >编辑</el-button>
          <el-button
            type="danger"
            @click="getInfo(scope.row.activityId)"
          >查看详情</el-button>
          <el-button
            v-if="scope.row.status == '0'"
            type="danger"
            @click="closeActivity(scope.row.activityId, scope.$index)"
          >关闭</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    添加的弹窗-->
    <el-dialog
      title="创建活动"
      :visible.sync="dialogAddFormVisible"
      center
    >
      <el-form :model="activityAddForm">
        <el-form-item label="标题">
          <el-input v-model="activityAddForm.title" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="activityAddForm.content"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="联系人手机">
          <el-input v-model="activityAddForm.phone" />
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input v-model="activityAddForm.name" />
        </el-form-item>
        <el-form-item label="公司">
          <el-input v-model="activityAddForm.company" />
        </el-form-item>
        <el-form-item label="人数">
          <el-input v-model="activityAddForm.headcount" />
        </el-form-item>
        <el-form-item label="地点">
          <el-input v-model="activityAddForm.place" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="activityAddForm.beginTime"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="activityAddForm.endTime"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>

        <el-form-item
          v-model="activityAddForm.type"
          label="类型"
        >
          <el-select
            v-model="activityAddForm.type"
            placeholder="请选择类型"
          >
            <el-option
              label="户内"
              value="0"
            />
            <el-option
              label="户外"
              value="1"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogAddFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addActivity"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑活动"
      :visible.sync="dialogUpdateFormVisible"
      center
    >
      <el-form :model="activityUpdateForm">
        <el-form-item label="标题">
          <el-input v-model="activityUpdateForm.title" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="activityUpdateForm.content"
            type="textarea"
            row="5"
          />
        </el-form-item>
        <el-form-item label="联系人手机">
          <el-input v-model="activityUpdateForm.phone" />
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input v-model="activityUpdateForm.name" />
        </el-form-item>
        <el-form-item label="公司">
          <el-input v-model="activityUpdateForm.company" />
        </el-form-item>
        <el-form-item label="人数">
          <el-input v-model="activityUpdateForm.headcount" />
        </el-form-item>
        <el-form-item label="地点">
          <el-input v-model="activityUpdateForm.place" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="activityUpdateForm.beginTime"
            type="datetime"
            placeholder="选择日期时间"
            :default-time="activityUpdateForm.beginTime"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="activityUpdateForm.endTime"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item
          v-model="activityUpdateForm.type"
          label="类型"
        >
          <el-select
            v-model="activityUpdateForm.type"
            placeholder="类型"
          >
            <el-option
              label="户外"
              value="0"
            />
            <el-option
              label="户内"
              value="1"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogUpdateFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="updateActivity"
        >确 定</el-button>
      </div>
    </el-dialog>
    <!--  活动详情-->
    <el-drawer
      title="活动详情"
      :visible.sync="table"
      direction="rtl"
      size="50%"
    >
      <el-descriptions
        title="活动信息"
        style="margin: 0px 20px 0px 20px"
        :column="1"
        border
      >
        <el-descriptions-item label="联系人姓名">{{
          activityInfo.name
        }}</el-descriptions-item>
        <el-descriptions-item label="联系号码">{{
          activityInfo.phone
        }}</el-descriptions-item>
        <el-descriptions-item
          label="地点"
        >{{ activityInfo.place }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{
          activityInfo.beginTime
        }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{
          activityInfo.endTime
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag size="small">{{
            getStatus(activityInfo.status, activityInfo.beginTime)
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="人数">{{
          activityInfo.headcount
        }}</el-descriptions-item>
        <el-descriptions-item label="标题">{{
          activityInfo.title
        }}</el-descriptions-item>
        <el-descriptions-item label="内容">{{
          activityInfo.content
        }}</el-descriptions-item>
      </el-descriptions>
      <el-button
        v-if="!showAppointment"
        style="margin: 20px 0px 20px 20px"
        @click="getAppointment(activityInfo.activityId)"
      >点击查看预约列表</el-button>
      <el-button
        v-else
        style="margin: 20px 0px 20px 20px"
        @click="showAppointment = false"
      >关闭</el-button>
      <el-table
        v-if="showAppointment"
        :data="appointmentList"
        border
        style="width: calc(100% - 40px); margin: 0 20px 20px 20px"
      >
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
        />
        <el-table-column
          prop="parentName"
          label="家长姓名"
          width="180"
        />
        <el-table-column
          prop="parentPhone"
          label="家长手机号"
        />
        <el-table-column
          prop="childName"
          label="孩子姓名"
        />
      </el-table>
    </el-drawer>
    <!--    底部分页    -->
    <el-footer style="margin-top: 30px">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="listParams.pageNum"
        :page-size="listParams.pageSize"
        style="display: flex; align-items: center; justify-content: center"
        @current-change="changePage($event)"
      />
    </el-footer>
  </div>
</template>
<script>
import * as activityApi from "@/api/activity";
import { Message } from "element-ui";
export default {
  name: "ActivityListVue",
  filters: {
    statusFilter(status, beginTime) {
      // if (StringToD)
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      appointmentList: "",
      showAppointment: false,
      listLoading: true,
      table: false,
      total: "",
      dialogAddFormVisible: false,
      dialogUpdateFormVisible: false,
      listParams: {
        pageSize: 10,
        pageNum: 1,
        title: "",
        type: "",
        name: "",
        company: "",
      },
      activityAddForm: {
        title: "",
        phone: "",
        name: "",
        company: "",
        content: "",
        headcount: "",
        beginTime: "",
        type: "",
        creator: "",
        place: "",
        endTime: ""
      },
      activityUpdateForm: {
        title: "",
        phone: "",
        name: "",
        company: "",
        content: "",
        headcount: "",
        beginTime: "",
        type: "",
        creator: "",
        place: "",
        endTime: ""
      },
      activityInfo: {
        activityId: "",
        title: "",
        phone: "",
        name: "",
        company: "",
        content: "",
        headcount: "",
        beginTime: "",
        type: "",
        creator: "",
        place: "",
        createTime: "",
        endTime: ""
      },
    };
  },
  created() {
    this.fetchData(this.listParams);
  },
  methods: {
    exportActivity() {
      activityApi.exportExcel(this.listParams);
    },
    changePage(event) {
      this.listParams.pageNum = event;
      this.fetchData(this.listParams);
    },
    fetchData(listParams) {
      activityApi.getActivityList(listParams).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    getStatus(status) {
      const statusMap = {
        0: "未开始",
        1: "已开始",
        2: "已结束",
        3: "已关闭"
      };
      return statusMap[status];
    },
    addActivity() {
      activityApi.addActivity(this.activityAddForm).then((res) => {
        if (res.success === "1") {
          Message.success(res.message);
          this.dialogAddFormVisible = false;
          this.fetchData(this.listParams);
          Object.assign(this.activityAddForm, this.$options.data().activityAddForm);
        }
      });
    },
    update(index) {
      console.log(this.list[index]);
      this.activityUpdateForm = this.list[index];
      this.activityUpdateForm.type = String(this.activityUpdateForm.type);
      this.dialogUpdateFormVisible = true;
    },
    updateActivity() {
      activityApi.updateActivity(this.activityUpdateForm).then((res) => {
        if (res.success === "1") {
          Message.success(res.message);
          this.dialogUpdateFormVisible = false;
          this.fetchData(this.listParams);
        }
      });
    },
    closeActivity(activityId) {
      this.$confirm("此操作将永久关闭该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "danger"
      }).then(() => {
        activityApi.closeActivity({ activityId: activityId}).then(response => {
          if (response.success === "1") {
            this.$message({
              type: "success",
              message: "关闭成功!"
            });
            this.fetchData(this.listParams);
          } else {
            Message.error(response.message);
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消关闭"
        });
      });
    },
    getInfo(activityId) {
      this.table = true;
      activityApi.getActivity({ activityId: activityId }).then((response) => {
        this.activityInfo = response.data;
      });
    },
    getAppointment(activityId) {
      const params = {
        activityId: activityId,
        pageSize: 2,
        pageNum: 1,
      };
      activityApi.getAppointmentList(params).then((response) => {
        this.appointmentList = response.data;
      });
      this.showAppointment = true;
    },
  }
};
</script>

<style scoped></style>
